<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="80%"
    custom-class="search-result-pop"
    :before-close="handleClose"
  >
    <div>
      <div class="basic-infos">
        <span class="title">基本信息</span>
        <FormGroup ref="formParams1" style="margin-top: 20px" :search-config="addPopFormConfig" label-width="120px" label-position="right" />
      </div>
      <div class="basic-infos">
        <span class="title">详情</span>
        <EditorCom v-if="dialogVisible" ref="editor" v-model="detail" style="width: 1000px; padding-left: 120px" />
        <FormGroup ref="formParams2" style="margin-top: 20px" :search-config="uploadConfig" label-width="120px" label-position="right" />
      </div>
    </div>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { create, getNewsStudyInfo, updateNewsStudyInfo } from '@/api/content-manage/researchResult.js'
import { TYPE, addPopFormConfig, uploadConfig } from '../initData'
import FormGroup from '@/views/components/FormGroup'
import EditorCom from '@/components/Editor/newEdit.vue'
export default {
  name: 'AddPop',
  components: {
    FormGroup,
    EditorCom
  },
  data() {
    return {
      dialogVisible: false,
      addPopFormConfig: JSON.parse(JSON.stringify(addPopFormConfig)),
      uploadConfig: JSON.parse(JSON.stringify(uploadConfig)),
      src: '',
      popType: '',
      detail: '',
      columnList: [],
      id: ''
    }
  },
  methods: {
    async getNewsStudyInfo(id) {
      const { code, data } = await getNewsStudyInfo({
        id,
        type: TYPE
      })
      const newConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      // uploadConfig
      const newUploadConfig = JSON.parse(JSON.stringify(uploadConfig))
      if (code === 0) {
        const keys = Object.keys(data)
        keys.forEach((v) => {
          newConfig.forEach(ele => {
            if (ele.keyIndex === v) {
              ele.value = data[v]
            }
            if (ele.keyIndex === 'typeId') {
              ele.options = this.columnList
            }
          })
          newUploadConfig.forEach(ele => {
            if (ele.keyIndex === v) {
              ele.value = data[v]
            }
          })
        })
        this.detail = data.detail
        this.uploadConfig = newUploadConfig
        this.addPopFormConfig = newConfig
      }
    },
    open({ popType, id, columnList }) {
      this.id = id
      this.popType = popType
      this.dialogVisible = true
      this.columnList = columnList
      if (popType === 'edit') {
        this.getNewsStudyInfo(id)
      } else {
        const newConfig = JSON.parse(JSON.stringify(addPopFormConfig))
        newConfig.forEach(ele => {
          if (ele.keyIndex === 'typeId') {
            ele.options = this.columnList
          }
        })
        this.addPopFormConfig = newConfig
        this.uploadConfig = JSON.parse(JSON.stringify(uploadConfig))
        this.detail = ''
      }
      this.$nextTick(() => {
        this.$refs.formParams1 && this.$refs.formParams1.resetFields()
      })
    },
    handleClose() {
      this.addPopFormConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      this.uploadConfig = JSON.parse(JSON.stringify(uploadConfig))
      this.detail = ''
      this.dialogVisible = false
    },
    async handleConfirm() {
      const fromParams1 = this.$refs.formParams1 && await this.$refs.formParams1.getParams()
      const fromParams2 = this.$refs.formParams2 && await this.$refs.formParams2.getParams()
      const detail = this.$refs.editor && this.$refs.editor.getValue()
      if (!detail || detail === '<p><br></p>') {
        this.$message.warning('请编辑文章内容')
        return
      }
      const params = {
        ...fromParams1,
        ...fromParams2,
        detail,
        type: TYPE
      }
      this.src = fromParams2.pdfUrl

      this[this.popType](params)
    },
    async add(fromParams) {
      const params = {
        ...fromParams,
        type: TYPE

      }
      const { code, msg } = await create(params)
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.dialogVisible = false
      this.$emit('addSuccess')
    },
    async edit(fromParams) {
      const params = {
        ...fromParams,
        type: TYPE,
        id: this.id
      }
      const { code, msg } = await updateNewsStudyInfo(params)
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.dialogVisible = false
      this.$emit('addSuccess')
    }
  }
}
</script>

<style lang='scss'>
    .search-result-pop {
        .el-drawer__body {
            padding: 15px 20px;
        }
        .basic-infos {

            .title {
                padding: 3px 10px;
                border-left: 2px solid rgb(20, 165, 232);
                margin-bottom: 20px;
            }
        }
        .dialog-footer {
            display: inline-block;
            width: 100%;
            text-align: right;
        }
    }
</style>
